// 商家销量统计的很响柱状图
<template>
  <div class="com-container">
    <div class="com-echarts" ref="seller_ref"></div>
  </div>
</template>

<script>
import "../../public/static/theme/chalk";

export default {
  data() {
    return {
      echarts: null,
      allData: [],
      currentPage: 1, //当前显示的页数
      totalPage: 0, //一共有多少页数
      timeId: null, //定时器的id
    };
  },
  methods: {
    //初始化echarts对象
    initCharts() {
      this.echarts = this.$echarts.init(this.$refs.seller_ref, "chalk");
      //对图表初始化的配置
      const initOption = {
        title: {
          text: " ▎商家销售统计",
          textStyle: {
            fontSize: 60,
          },
          left: 20,
          top: 20,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
        },
        series: [
          {
            type: "bar",
            barWidth: "60%",
            label: {
              show: true,
              position: "right",
              color: "white",
            },
            itemStyle: {
              borderRadius: [0, 60, 60, 0],
            },
          },
        ],
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#5052EE", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#AB6EE5", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              width: 90,
              color: "#2D3443",
              type: "solid",
            },
          },
        },
      };
      this.echarts.setOption(initOption);
      //对图表对象进行鼠标事件监听
      this.echarts.on("mouseover", () => {
        clearInterval(this.timeId);
      });
      this.echarts.on("mouseout", () => {
        this.Interval();
      });
    },
    //获取服务器数据
    async getData() {
      const { data: res } = await this.$http.get("seller");
      // console.log(res);
      this.allData = res;
      //将数据进行排序
      this.allData.sort((a, b) => {
        return a.value - b.value;
      });
      //每5个显示一页
      /*       this.totalPage =
        this.allData.length % 5 === 0
          ? this.allData.length / 5
          : (this.allData.length / 5) + 1; */
      this.totalPage = Math.ceil(this.allData.length / 5);
      // console.log(this.totalPage);
      this.updataChart();
      //启动定时器
      this.Interval();
    },
    //更新图表
    updataChart() {
      const showData = this.allData.slice(
        (this.currentPage - 1) * 5,
        this.currentPage * 5
      );
      //把服务器的数据改造成数组
      const sellerDataNames = [];
      const sellerDataValus = [];
      showData.forEach((item) => {
        sellerDataNames.push(item.name);
        sellerDataValus.push(item.value);
      });

      const option = {
        yAxis: {
          data: sellerDataNames,
        },
        series: [
          {
            data: sellerDataValus,
          },
        ],
      };
      this.echarts.setOption(option);
    },
    //定时器函数
    Interval() {
      this.timeId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.updataChart();
      }, 3000);
    },
    //屏幕适应
    adapteScreen() {
      {
        const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
        // console.log(titleFontSize);
        const adapteOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize,
            },
          },
          series: [
            {
              barWidth: titleFontSize,
              itemStyle: {
                borderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
              },
            },
          ],
          tooltip: {
            axisPointer: {
              lineStyle: {
                width: titleFontSize,
              },
            },
          },
        };
        this.echarts.setOption(adapteOption);
        this.echarts.resize();
      }
    },
  },
  //最早操作DOM元素
  mounted() {
    this.initCharts();
    window.addEventListener("resize", this.adapteScreen);
    this.adapteScreen();
  },
  //最早获取数据
  created() {
    this.getData();
  },
  //销毁组件
  destroyed() {
    clearInterval(this.timeId);
    window.removeEventListener("resize", this.adapteScreen);
  },
};
</script>

<style lang="less" scoped>
.com-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;

  .com-echarts {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    /deep/ canvas {
      border-radius: 20px;
    }
  }
}
</style>